<template>
  <div class="demo-title">action-sheet/demo1</div>
  <div class="demo">
    <RadioGroup v-model="direction" direction="horizontal">
      <Radio label="horizontal">horizontal</Radio>
      <Radio label="vertical">vertical</Radio>
    </RadioGroup>
    <Form ref="formRef" :label-width="70" :data="formData" :rules="rules" :direction="direction">
      <FormItem label="文本" field="input">
        <Input v-model="formData.input" placeholder="请输入" />
      </FormItem>
      <FormItem label="数字" field="inputNumber">
        <Input type="number" v-model="formData.inputNumber" placeholder="请输入" />
      </FormItem>
      <FormItem label="多行文本" field="textarea">
        <Textarea v-model="formData.textarea" placeholder="请输入" />
      </FormItem>
      <FormItem label="单选" field="radio">
        <RadioGroup v-model="formData.radio" direction="horizontal">
          <Radio v-for="(item, i) in radio.options" :key="'radio'+i" :label="item.label">{{ item.text }}</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="多选" field="checkbox">
        <CheckboxGroup v-model="formData.checkbox" direction="horizontal">
          <Checkbox v-for="(item, i) in checkbox.options" :key="'checkbox'+i" :label="item.label">{{ item.text }}</Checkbox>
        </CheckboxGroup>
      </FormItem>
      <FormItem label="单项选择" field="picker">
        <FormItemDesc :text="picker.getText()" placeholder="请选择" @click="picker.show()" />
      </FormItem>
      <FormItem label="日期选择" field="datePicker">
        <FormItemDesc :text="datePicker.getText()" placeholder="请选择" @click="datePicker.show()" />
      </FormItem>
      <FormItem label="图片上传" field="imagePicker">
        <ImagePicker v-model:file-list="formData.imagePicker" :url="imagePicker.url" :maximum="3" multiple />
      </FormItem>
    </Form>
    <!-- 弹窗-单项选择 -->
    <Picker v-model="formData.picker" v-model:visible="picker.visible" :columns="picker.columns" @confirm="picker.onConfirm" />
    <!-- 弹窗-日期选择 -->
    <DatePicker v-model="formData.datePicker" v-model:visible="datePicker.visible" @confirm="datePicker.onConfirm" />
    <div class="submit" @click="submit()">提交</div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import { Form, FormItem, FormItemDesc } from '@sscd-mobile/form'
  import Input from '@sscd-mobile/input'
  import Textarea from '@sscd-mobile/textarea'
  import Picker from '@sscd-mobile/picker'
  import type { PickerRes } from '@sscd-mobile/picker'
  import { RadioGroup, Radio } from '@sscd-mobile/radio'
  import { CheckboxGroup, Checkbox } from '@sscd-mobile/checkbox'
  import { DatePicker } from '@sscd-mobile/date-picker'
  import type { DatePickerRes } from '@sscd-mobile/date-picker'
  import ImagePicker from '@sscd-mobile/image-picker'
  import dayjs from 'dayjs'
  /** 表单布局 */
  const direction = ref('horizontal')
  /** 表单 */
  const formRef = ref()
  /** 表单数据 */
  const formData = reactive({
    input: '',
    inputNumber: NaN,
    textarea: '',
    radio: '',
    checkbox: [],
    picker: [],
    datePicker: new Date(2024, 0, 10, 9, 9),
    imagePicker: []
  })
  /** 校验规则 */
  const rules = [
    { field: 'input', required: true, requiredMsg: '请输入input' },
    { field: 'inputNumber', required: true, type: 'number' },
    { field: 'textarea', required: true, type: '' },
    { field: 'radio', required: true, type: '' },
    { field: 'checkbox', required: true, type: '' },
    { field: 'picker', required: true, type: '' },
    { field: 'datePicker', required: true, type: '' },
    { field: 'imagePicker', required: true, type: 'imagePicker' },
  ]
  /**
   * 表单提交
   */
  const submit = () => {
    console.log('submit: ', formRef.value.valid())
  }
  /** 表单项-单选 */
  const radio = reactive({
    options: [
      { label: 'option-1', text: '选项1' },
      { label: 'option-2', text: '选项2' },
      { label: 'option-3', text: '选项3' },
      { label: 'option-4', text: '选项4' }
    ],
  })
  /** 表单项-多选 */
  const checkbox = reactive({
    options: [
      { label: 'option-1', text: '选项1' },
      { label: 'option-2', text: '选项2' },
      { label: 'option-3', text: '选项3' },
      { label: 'option-4', text: '选项4' }
    ],
  })
  /** 表单项-单项选择 */
  const picker = reactive({
    visible: false,
    show: () => picker.visible = true,
    getText() {
      let res = ''
      formData.picker.forEach((pickerItem) => {
        res += picker.columns.find((column) => column.value === pickerItem)?.text
      })
      return res
    },
    columns: [
      { text: '选项1', value: 1 },
      { text: '选项2', value: 2 },
      { text: '选项3', value: 3 },
      { text: '选项4', value: 4 }
    ],
    onConfirm: (res: PickerRes) => console.log('picker-onConfirm: ', res)
  })
  /** 表单项-日期选择 */
  const datePicker = reactive({
    visible: false,
    show: () => datePicker.visible = true,
    getText: () => dayjs(formData.datePicker).format('YYYY-MM-DD'),
    onConfirm: (res: DatePickerRes) => console.log('datePicker-onConfirm: ', `${res.value[0]}-${res.value[1]}-${res.value[2]}`)
  })
  /** 表单项-图片上传 */
  const imagePicker = reactive({
    url: 'https://my-json-server.typicode.com/linrufeng/demo/posts'
  })
</script>

<style scoped>
  .demo {
    margin-bottom: 48px;
    padding: 16px 16px 0;
    background: #fff;
  }
  .submit {
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #1677ff;
    color: #fff;
  }
</style>
